<template>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
        <!-- <img src="../assets/logo.png" class="logo" /> -->
        <el-menu-item index="1">Datasets</el-menu-item>
        <el-menu-item index="2">Indicators</el-menu-item>
    </el-menu>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

const emit = defineEmits(['navChange'])
const activeIndex = ref('1')
const handleSelect = (index) => {
    activeIndex.value = index;
    emit('navChange', index)
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo{
    width: 126px;
    padding-left: 30px;
    padding-right: 30px;
    pointer-events: none;
}
</style>
